﻿.form-check > .form-check-input.form-check-input-pointer,
.form-check > .form-check-label.form-check-label-pointer,
.custom-checkbox > .custom-control-input.custom-control-input-pointer,
.custom-checkbox > .custom-control-label.custom-control-label-pointer {
    cursor: pointer;
}

input.form-control[type=color] {
    height: calc(1.5em + .75rem + 2px);
    padding: .375rem .75rem;
}

.form-control-plaintext {
    &.form-control-xs,
    &.form-control-md,
    &.form-control-xl {
        padding-right: 0;
        padding-left: 0;
    }
}

.form-control {
    height: 36px;
}

.form-control-xs {
    font-size: $textfield-font-size-xs;
    height: $textfield-height-xs;
    /*height: 36px;*/
    line-height: $textfield-line-height-xs;
    padding: $textfield-padding-y-xs $textfield-padding-x-xs calc(#{$textfield-padding-y-xs} - #{$textfield-border-width});

    &[type='file'] {
        max-height: $textfield-height-xs;
    }
}

.form-control-sm {
    font-size: $textfield-font-size-sm;
    height: $textfield-height-sm;
    /*height: 36px;*/
    line-height: $textfield-line-height-sm;
    padding: $textfield-padding-y-sm $textfield-padding-x-sm calc(#{$textfield-padding-y-sm} - #{$textfield-border-width});

    &[type='file'] {
        max-height: $textfield-height-sm;
    }
}

.form-control-md {
    font-size: $textfield-font-size-md;
    height: $textfield-height-md;
    /*height: 40px;*/
    line-height: $textfield-line-height-md;
    padding: $textfield-padding-y-md $textfield-padding-x-md calc(#{$textfield-padding-y-md} - #{$textfield-border-width});

    &[type='file'] {
        max-height: $textfield-height-md;
    }
}

.form-control-lg {
    font-size: $textfield-font-size-lg;
    height: $textfield-height-lg;
    /*height: 62px;*/
    line-height: $textfield-line-height-lg;
    padding: $textfield-padding-y-lg $textfield-padding-x-lg calc(#{$textfield-padding-y-lg} - #{$textfield-border-width});

    &[type='file'] {
        max-height: $textfield-height-lg;
    }
}

.form-control-xl {
    font-size: $textfield-font-size-xl;
    height: $textfield-height-xl;
    /*height: 66px;*/
    line-height: $textfield-line-height-xl;
    padding: $textfield-padding-y-xl $textfield-padding-x-xl calc(#{$textfield-padding-y-xl} - #{$textfield-border-width});

    &[type='file'] {
        max-height: $textfield-height-xl;
    }
}

.custom-select-xs {
    //  height: $custom-select-height-xs
    font-size: $textfield-font-size-xs;
    line-height: $textfield-line-height-xs;
    padding: $textfield-padding-y-xs $textfield-select-bg-size calc(#{$textfield-padding-y-xs} - #{$textfield-border-width}) $textfield-padding-x-xs;

    &[multiple],
    &[size]:not([size='1']) {
        padding: calc(#{$textfield-box-padding-y-xs} - #{$textfield-border-width}) $textfield-box-padding-x-xs;
    }
}

.custom-select-sm {
    //  height: $custom-select-height-sm
    font-size: $textfield-font-size-sm;
    line-height: $textfield-line-height-sm;
    padding: $textfield-padding-y-sm $textfield-select-bg-size calc(#{$textfield-padding-y-sm} - #{$textfield-border-width}) $textfield-padding-x-sm;

    &[multiple],
    &[size]:not([size='1']) {
        padding: calc(#{$textfield-box-padding-y-sm} - #{$textfield-border-width}) $textfield-box-padding-x-sm;
    }
}

.custom-select-md {
    //  height: $custom-select-height-md
    font-size: $textfield-font-size-md;
    line-height: $textfield-line-height-md;
    padding: $textfield-padding-y-md $textfield-select-bg-size calc(#{$textfield-padding-y-md} - #{$textfield-border-width}) $textfield-padding-x-md;

    &[multiple],
    &[size]:not([size='1']) {
        padding: calc(#{$textfield-box-padding-y-md} - #{$textfield-border-width}) $textfield-box-padding-x-md;
    }
}

.custom-select-lg {
    //  height: $custom-select-height-lg
    font-size: $textfield-font-size-lg;
    line-height: $textfield-line-height-lg;
    padding: $textfield-padding-y-lg $textfield-select-bg-size calc(#{$textfield-padding-y-lg} - #{$textfield-border-width}) $textfield-padding-x-lg;

    &[multiple],
    &[size]:not([size='1']) {
        padding: calc(#{$textfield-box-padding-y-lg} - #{$textfield-border-width}) $textfield-box-padding-x-lg;
    }
}

.custom-select-xl {
    //  height: $custom-select-height-xl
    font-size: $textfield-font-size-xl;
    line-height: $textfield-line-height-xl;
    padding: $textfield-padding-y-xl $textfield-select-bg-size calc(#{$textfield-padding-y-xl} - #{$textfield-border-width}) $textfield-padding-x-xl;

    &[multiple],
    &[size]:not([size='1']) {
        padding: calc(#{$textfield-box-padding-y-xl} - #{$textfield-border-width}) $textfield-box-padding-x-xl;
    }
}

.input-group-xs {
    > .form-control,
    > .custom-select,
    > .b-numeric > .form-control {
        font-size: $textfield-font-size-xs;
        line-height: $textfield-line-height-xs;
        padding: $textfield-padding-y-xs $textfield-padding-x-xs calc(#{$textfield-padding-y-xs} - #{$textfield-border-width});
    }

    > .input-group-append,
    > .input-group-prepend {
        > .btn {
            height: $btn-height-xs;
        }

        > .input-group-text {
            font-size: $textfield-font-size-xs;
            line-height: $textfield-line-height-xs;
        }
    }
}

.input-group-md {
    > .form-control,
    > .custom-select,
    > .b-numeric > .form-control {
        font-size: $textfield-font-size-md;
        line-height: $textfield-line-height-md;
        padding: $textfield-padding-y-md $textfield-padding-x-md calc(#{$textfield-padding-y-md} - #{$textfield-border-width});
    }

    > .input-group-append,
    > .input-group-prepend {
        > .btn {
            height: $btn-height-md;
        }

        > .input-group-text {
            font-size: $textfield-font-size-md;
            line-height: $textfield-line-height-md;
        }
    }
}

.input-group-lg {
    > .form-control,
    > .custom-select,
    > .b-numeric > .form-control {
        font-size: $textfield-font-size-lg;
        line-height: $textfield-line-height-lg;
        padding: $textfield-padding-y-lg $textfield-padding-x-lg calc(#{$textfield-padding-y-lg} - #{$textfield-border-width});
    }

    > .input-group-append,
    > .input-group-prepend {
        > .btn {
            height: $btn-height-lg;
        }

        > .input-group-text {
            font-size: $textfield-font-size-lg;
            line-height: $textfield-line-height-lg;
        }
    }
}

.input-group-xl {
    > .form-control,
    > .custom-select,
    > .b-numeric > .form-control {
        font-size: $textfield-font-size-xl;
        line-height: $textfield-line-height-xl;
        padding: $textfield-padding-y-xl $textfield-padding-x-xl calc(#{$textfield-padding-y-xl} - #{$textfield-border-width});
    }

    > .input-group-append,
    > .input-group-prepend {
        > .btn {
            height: $btn-height-xl;
        }

        > .input-group-text {
            font-size: $textfield-font-size-xl;
            line-height: $textfield-line-height-xl;
        }
    }
}

@mixin checkbox($size, $font-size, $line-height, $padding-left) {
    .custom-control.custom-checkbox {
        > .custom-control-input.custom-control-input-#{$size} {
            + .custom-control-label::before {
                width: $font-size * 1.5;
                height: $font-size * 1.5;
                margin-top: -($font-size / 4);
                margin-left: -($font-size / 4);
            }

            + .custom-control-label::after {
                font-size: $font-size;
            }

            + .custom-control-label {
                line-height: $line-height;
                padding-left: $padding-left;
                vertical-align: middle;
            }
        }
    }
}

@include checkbox('xs', .5rem, .5rem, 0px);
@include checkbox('sm', 1rem, 1rem, 0px);
@include checkbox('md', 2rem, 2rem, 3px);
@include checkbox('lg', 2.5rem, 2.5rem, 6px);
@include checkbox('xl', 3rem, 3rem, 10px);

@mixin radio($size, $font-size, $line-height, $padding-left) {
    /* $padding-top: (($radio-size - ($radio-size - ($radio-size / 2))) / 2);
    $padding-left: $radio-size / 2;*/
    .custom-control.custom-radio {
        > .custom-control-input.custom-control-input-#{$size} {
            + .custom-control-label::before {
                width: $font-size * 1.5;
                height: $font-size * 1.5;
                margin-top: -($font-size / 4);
                margin-left: -($font-size / 4);
            }

            + .custom-control-label::after {
                font-size: $font-size;
            }

            + .custom-control-label {
                line-height: $line-height;
                padding-left: $padding-left;
            }
        }
    }
}

@include radio('xs', .7rem, .7rem, 0px);
@include radio('sm', 1rem, 1rem, 0px);
@include radio('md', 2rem, 2rem, 3px);
@include radio('lg', 2.5rem, 2.5rem, 6px);
@include radio('xl', 3rem, 3rem, 10px);

select[readonly] {
    pointer-events: none;

    option,
    optgroup {
        display: none;
    }
}
